<template>
    <div>
        <div class="zx_titel">审图资料修改</div>
        <div class="upload_list">
            <div class="drawingsUploadLayout">
                <div class="text_list">
                    <div>
                        审核状态:
                        <dict-tag
                                :options="dict.type.apply_status"
                                :value="reportCadApply.applyStatus"
                        />
                    </div>
                    <div> 审核意见:{{ reportCadApply.comment }}</div>
                    <div> 审核时间:{{ reportCadApply.checkTime }}</div>
                    <div>
            <div>审核图片:</div>
              <el-image
                style="width: 200px; height: 200px"
                :src="reportCadApply.checkUrl"
                :fit="contain"
              ></el-image>
         
          </div>
                </div>
                <div>
                    <div v-for="(item,index) in imglist" :key="index">
                        <el-image
                                style="width: 100px; height: 100px; margin-right: 10px"
                                :src="item"
                                fit="contain"
                                :preview-src-list="imglist[index]"
                        ></el-image>
                    </div>


                </div>
            </div>
        </div>
        <div class="upload_list">
            <!--      <div class="drawingsUploadLayout">主场表格</div>-->
            <div class="fill_row">
                <el-form
                        :model="ruleForm"
                        :rules="rules"
                        ref="ruleForm"
                        label-position="top"
                        label-width="120px"
                        class="demo-ruleForm"
                >
                    <el-form-item label="施工单位资质证明" prop="imgurl" v-if="ruleForm.isProblem == 1">
                    <div class="upload_text">
                        要求：搭建单位提交营业执照扫描件、资质证书扫描件
                    </div>
                    <ImageUpload
                            v-model="ruleForm.imgurl"
                            :attachmentType="attachmentType1"
                            :imgtype="1"
                            :limit="5"
                            :bool="bool"
                    ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="特装展台搭建委托书" prop="imgurl1" v-if="ruleForm.isProblem1 == 1">
                        <div class="upload_text">
                            要求：必须填写完整，搭建单位及参展单位签字盖章
                        </div>
                        <ImageUpload
                                v-model="ruleForm.imgurl1"
                                :attachmentType="attachmentType2"
                                :imgtype="2"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="特装搭建施工安全责任书" prop="imgurl2" v-if="ruleForm.isProblem2 == 1">
                        <div class="upload_text">
                            要求：必须填写完整，搭建单位签字盖章。
                        </div>
                        <ImageUpload
                                v-model="ruleForm.imgurl2"
                                :attachmentType="attachmentType3"
                                :imgtype="3"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="音量控制承诺书" prop="imgurl3" v-if="ruleForm.isProblem3 == 1">
                        <div class="upload_text">
                            要求：必须填写完整，由参展单位签字盖章
                        </div>
                        <ImageUpload
                                v-model="ruleForm.imgurl3"
                                :attachmentType="attachmentType4"
                                :imgtype="4"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="电工证" prop="imgurl4" v-if="ruleForm.isProblem4 == 1">
                        <div class="upload_text">
                            要求：提交彩色正反面有效电工证件，搭建单位盖章
                        </div>
                        <ImageUpload
                                v-model="ruleForm.imgurl4"
                                :attachmentType="attachmentType5"
                                :imgtype="5"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="电动工具入馆申请" prop="imgurl5" v-if="ruleForm.isProblem5 == 1">
                        <div class="upload_text">要求：必须填写完整，搭建单位签字盖章</div>
                        <ImageUpload
                                v-model="ruleForm.imgurl5"
                                :attachmentType="attachmentType6"
                                :imgtype="6"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="展台效果图" prop="imgurl6" v-if="ruleForm.isProblem6 == 1">
                        <div class="upload_text">
                            要求：需提交彩色正面、侧面、俯视图并标注尺寸，搭建单位盖章
                        </div>
                        <ImageUpload
                                v-model="ruleForm.imgurl6"
                                :attachmentType="attachmentType7"
                                :imgtype="7"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="展台平面图" prop="imgurl7" v-if="ruleForm.isProblem7 == 1">
                        <div class="upload_text">
                            要求：需标注配电箱安装位置及展台的区域分布，搭建单位盖章
                        </div>
                        <ImageUpload
                                v-model="ruleForm.imgurl7"
                                :attachmentType="attachmentType8"
                                :imgtype="8"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="展台施工图" prop="imgurl8" v-if="ruleForm.isProblem8 == 1">
                        <div class="upload_text">
                            要求：需提交全套图纸并要求标注详细尺寸、选材、规格，搭建单位盖章
                        </div>
                        <ImageUpload
                                v-model="ruleForm.imgurl8"
                                :attachmentType="attachmentType9"
                                :imgtype="9"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="网格图" prop="imgurl9" v-if="ruleForm.isProblem9 == 1">
                        <div class="upload_text">要求：需提交正面、侧面网格图标明高度，搭建单位盖章</div>
                        <ImageUpload
                                v-model="ruleForm.imgurl9"
                                :attachmentType="attachmentType10"
                                :imgtype="10"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="电路图" prop="imgurl10" v-if="ruleForm.isProblem10 == 1">
                        <div class="upload_text">
                            要求：需标注电器回路、回路负载、所用材质的规格及型号，搭建单位盖章
                        </div>
                        <ImageUpload
                                v-model="ruleForm.imgurl10"
                                :attachmentType="attachmentType11"
                                :imgtype="11"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="吊点图" prop="imgurl12" v-if="ruleForm.isProblem12 == 1">
                        <div class="upload_text">
                            要求：需提交效果图、平面图、材质说明图、吊点点位重量计算图 （每个吊点重量不能超过100kg），搭建单位盖章
                        </div>
                        <ImageUpload
                                v-model="ruleForm.imgurl12"
                                :attachmentType="attachmentType13"
                                :imgtype="13"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="维保证" prop="imgurl13" v-if="ruleForm.isProblem13 == 1">
                        <div class="upload_text">
                            要求：要求：需提交正确的个人信息，搭建单位盖章
                        </div>
                        <ImageUpload
                                v-model="ruleForm.imgurl13"
                                :attachmentType="attachmentType14"
                                :imgtype="14"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                    <el-form-item label="结构安全证明书" prop="imgurl11" v-if="ruleForm.isProblem11 == 1">
                        <div class="upload_text">
                            要求：搭建二层展台的参展单位须提供建筑部门出具的展台结构安全证明书，搭建单位盖章
                        </div>
                        <ImageUpload
                                v-model="ruleForm.imgurl11"
                                :attachmentType="attachmentType12"
                                :imgtype="12"
                                :limit="5"
                                :bool="bool"
                        ></ImageUpload>
                    </el-form-item>
                </el-form>
            </div>

            <div class="img_upload"></div>
            <!-- @click="hanldnext(4)" -->
            <div class="but_warp">
                <!-- <el-button size="mini" @click="hanldnext(2)">上一步</el-button> -->
                <el-button size="mini" @click="hanlupad" type="danger"
                >确认修改</el-button
                >
            </div>
        </div>
    </div>
</template>
<script>
    import { apply, upalodapply, applydetils } from "@/api/outfit/drawingadd.js";
    import { getToken, setToken } from "@/utils/auth";
    export default {
        name: 'step4',
        props:[
            'appid','bool'
        ],
        dicts: [
            "apply_status",

        ],
        data() {
            return {
                dialogImageUrl: "",
                dialogVisible: false,
                disabled: false,
                dialoginput: false,
                infodata: {},
                attachmentType1: [],
                attachmentType2: [],
                attachmentType3: [],
                attachmentType4: [],
                attachmentType5: [],
                attachmentType6: [],
                attachmentType7: [],
                attachmentType8: [],
                attachmentType9: [],
                attachmentType10: [],
                attachmentType11: [],
                attachmentType12: [],
                attachmentType13: [],
                attachmentType14: [],
                reportCadApply:{},
                ruleForm: {
                    imgurl: null,
                    imgurl1: null,
                    imgurl2:null,
                    imgurl3:null,
                    imgurl4:null,
                    imgurl5:null,
                    imgurl6:null,
                    imgurl7:null,
                    imgurl8:null,
                    imgurl9:null,
                    imgurl10:null,
                    imgurl11:null,
                    imgurl12:null,
                    imgurl13:null,
                    isProblem1: null,
                    isProblem2: null,
                    isProblem3: null,
                    isProblem4: null,
                    isProblem5: null,
                    isProblem6: null,
                    isProblem7: null,
                    isProblem8: null,
                    isProblem9: null,
                    isProblem10: null,
                    isProblem11: null,
                    isProblem12: null,
                    isProblem13: null,
                },
                rules: {
                    imgurl: [{  required: true, message: "请上传图片", trigger: "blur" }],
                    imgurl1: [{ required: true, message: "请上传图片", trigger: "blur" }],
                    imgurl2: [{ required: true, message: "请上传图片", trigger: "blur" }],
                    imgurl3: [{ required: true, message: "请上传图片", trigger: "blur" }],
                    imgurl4: [{ required: true, message: "请上传图片", trigger: "blur" }],
                    imgurl5: [{ required: true, message: "请上传图片", trigger: "blur" }],
                    imgurl6: [{ required: true, message: "请上传图片", trigger: "blur" }],
                    imgurl7: [{ required: true, message: "请上传图片", trigger: "blur" }],
                    imgurl8: [{ required: true, message: "请上传图片", trigger: "blur" }],
                    imgurl9: [{ required: true, message: "请上传图片", trigger: "blur" }],
                    imgurl10: [{ required: true, message: "请上传图片", trigger: "blur" }],


                    // imgurl11: [{ required: true, message: "请上传图片", trigger: "blur" }],
                },
                applyid:0
            };
        },
        created() {

            this.infodata = JSON.parse(getToken("jd"));
            this.applyid = this.$route.query.id
            this.getdetils();
            this.getData();
        },
        activated() {

             this.applyid = this.$route.query.id
            this.getdetils();
            this.getData();
        },
        methods: {
            getData() {
                apply( this.applyid).then((res) => {
                    this.reportCadApply = res.data.reportCadApply;
                });
            },
            hanldnext(index) {
                this.$emit("hanldnext", index);
            },
            hanlupad() {
                console.log(this.ruleForm)
                this.$refs.ruleForm.validate((valid) => {
                    debugger;
                    if (valid) {
                        let from = {
                            id:  this.applyid,
                            applyStatus: 0,
                        };
                        upalodapply(from).then((res) => {
                            if (res.code == 200) {
                                this.hanldnext(4);
                                this.$message.success('修改成功')
                                this.$router.push('/applyRecord')
                            }
                        });
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            },
            // 查询附件详情
            getdetils() {
                applydetils( this.applyid).then((res) => {
                    console.log(res);
                    this.attachmentType1 = res.rows.filter(
                        (item) => item.attachmentType == 1
                    );
                    if (this.attachmentType1 != null && this.attachmentType1.length > 0) {
                        this.ruleForm.imgurl = this.attachmentType1[0].attachmentUrl;
                        this.ruleForm.isProblem = this.attachmentType1[0].isProblem;
                    }
                    console.log(this.ruleForm.imgUrl)
                    this.attachmentType2 = res.rows.filter(
                        (item) => item.attachmentType == 2
                    );
                    if (this.attachmentType2 != null && this.attachmentType2.length > 0) {
                        this.ruleForm.imgurl1 = this.attachmentType2[0].attachmentUrl;
                        this.ruleForm.isProblem1 = this.attachmentType2[0].isProblem;
                    }
                    this.attachmentType3 = res.rows.filter(
                        (item) => item.attachmentType == 3
                    );
                    if (this.attachmentType3 != null && this.attachmentType3.length > 0) {
                        this.ruleForm.imgurl2 = this.attachmentType3[0].attachmentUrl;
                        this.ruleForm.isProblem2 = this.attachmentType3[0].isProblem;
                    }
                    this.attachmentType4 = res.rows.filter(
                        (item) => item.attachmentType == 4
                    );
                    if (this.attachmentType4 != null && this.attachmentType4.length > 0) {
                        this.ruleForm.imgurl3 = this.attachmentType4[0].attachmentUrl;
                        this.ruleForm.isProblem3 = this.attachmentType4[0].isProblem;
                    }
                    this.attachmentType5 = res.rows.filter(
                        (item) => item.attachmentType == 5
                    );
                    if (this.attachmentType5 != null && this.attachmentType5.length > 0) {
                        this.ruleForm.imgurl4 = this.attachmentType5[0].attachmentUrl;
                        this.ruleForm.isProblem4 = this.attachmentType5[0].isProblem;
                    }
                    this.attachmentType6 = res.rows.filter(
                        (item) => item.attachmentType == 6
                    );
                    if (this.attachmentType6 != null && this.attachmentType6.length > 0) {
                        this.ruleForm.imgurl5 = this.attachmentType6[0].attachmentUrl;
                        this.ruleForm.isProblem5 = this.attachmentType6[0].isProblem;
                    }
                    this.attachmentType7 = res.rows.filter(
                        (item) => item.attachmentType == 7
                    );
                    if (this.attachmentType7 != null && this.attachmentType7.length > 0) {
                        this.ruleForm.imgurl6 = this.attachmentType7[0].attachmentUrl;
                        this.ruleForm.isProblem6 = this.attachmentType7[0].isProblem;
                    }
                    this.attachmentType8 = res.rows.filter(
                        (item) => item.attachmentType == 8
                    );
                    if (this.attachmentType8 != null && this.attachmentType8.length > 0) {
                        this.ruleForm.imgurl7 = this.attachmentType8[0].attachmentUrl;
                        this.ruleForm.isProblem7 = this.attachmentType8[0].isProblem;
                    }
                    this.attachmentType9 = res.rows.filter(
                        (item) => item.attachmentType == 9
                    );
                    if (this.attachmentType9 != null && this.attachmentType9.length > 0) {
                        this.ruleForm.imgurl8 = this.attachmentType9[0].attachmentUrl;
                        this.ruleForm.isProblem8 = this.attachmentType9[0].isProblem;
                    }
                    this.attachmentType10 = res.rows.filter(
                        (item) => item.attachmentType == 10
                    );
                    if (this.attachmentType10 != null && this.attachmentType10.length > 0) {
                        this.ruleForm.imgurl9 = this.attachmentType10[0].attachmentUrl;
                        this.ruleForm.isProblem9 = this.attachmentType10[0].isProblem;
                    }
                    this.attachmentType11 = res.rows.filter(
                        (item) => item.attachmentType == 11
                    );
                    if (this.attachmentType11 != null && this.attachmentType11.length > 0) {
                        this.ruleForm.imgurl10 = this.attachmentType11[0].attachmentUrl;
                        this.ruleForm.isProblem10 = this.attachmentType11[0].isProblem;
                    }
                    this.attachmentType12 = res.rows.filter(
                        (item) => item.attachmentType == 12
                    );
                    if (this.attachmentType12 != null && this.attachmentType12.length > 0) {
                        this.ruleForm.imgurl11 = this.attachmentType12[0].attachmentUrl;
                        this.ruleForm.isProblem11 = this.attachmentType12[0].isProblem;
                    }
                    this.attachmentType13 = res.rows.filter(
                        (item) => item.attachmentType == 13
                    );
                    if (this.attachmentType13 != null && this.attachmentType13.length > 0) {
                        this.ruleForm.imgurl12 = this.attachmentType13[0].attachmentUrl;
                        this.ruleForm.isProblem13 = this.attachmentType13[0].isProblem;
                    }
                    this.attachmentType14 = res.rows.filter(
                        (item) => item.attachmentType == 14
                    );
                    if (this.attachmentType14 != null && this.attachmentType14.length > 0) {
                        this.ruleForm.imgurl13 = this.attachmentType14[0].attachmentUrl;
                        this.ruleForm.isProblem13 = this.attachmentType14[0].isProblem;
                    }
                });
            },
        },
    };
</script>
<style scoped>
    .zx_titel {
        padding: 15px;
        font-size: 20px;
        font-weight: bold;
        border-bottom: 1px solid #e0e2e6;
    }
    .upload_list {
        margin: 10px;
        border: 1px solid #e8e8ee;
    }
    .drawingsUploadLayout {
        padding: 20px;
        background-color: #fafafa;
        font-size: 16px;
        color: #222;
    }
    .upload_text {
        font-size: 8px;
        margin-bottom: 10px;
        color: rgb(192,192,192);
    }
    .img_list_text {
        font-size: 14px;
        color: #666;
    }
    .but_warp {
        padding: 20px;
        display: flex;
        justify-content: flex-end;
    }
    .fill_row {
        padding: 0 20px;
    }
    .zx_titel {
        /* padding: 15px; */
        /* font-size: 20px; */
        font-weight: bold;
        border-bottom: 1px solid #e0e2e6;
    }
    .upload_list {
        margin: 10px;
        border: 1px solid #e8e8ee;
    }
    .drawingsUploadLayout {
        padding: 20px;
        background-color: #fafafa;
        font-size: 14px;
        color: #646464;
        display: flex;
        justify-content: space-between;
    }
    .text_list {
        line-height: 30px;
        width: 200px;
    }
</style>